<template>
  <el-card
    ><el-row :gutter="20" class="header"
      ><el-col :span="7"
        ><el-input
          v-model="queryForm.name"
          placeholder="请输入用户名"
          tabindex="2"
          clearable
      /></el-col>
      <el-button type="primary" :icon="Search" @click="regetuser"
        >Search</el-button
      ><el-button type="primary" @click="handleadduser" 
        >添加管理员</el-button
      ></el-row
    ><el-table :data="tableData" stripe style="width: 100%">
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        v-for="(item, index) in options"
        :key="index"
      >
        <template v-slot="{ row }" v-if="item.prop === 'status'"
          ><el-switch v-model="row.statusbool" @change="changestatus(row)"
        /></template>
        <template #default="{ row }" v-else-if="item.prop === `action`">
          <el-button type="primary" size="small" @click="edituser(row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="clickdeleteuser(row)"
            >删除</el-button
          >
        </template>
      </el-table-column></el-table
    >
    <el-pagination
      v-model:currentPage="queryForm.pageIndex"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[5, 10, 20, 50]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  /></el-card>
  <Dialog v-model="dialogVisible" @inituserlist="inigetuser" />
  <Edit v-model="editVisible" @inituserlist="inigetuser" :rowvalue="rowvalue" />
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {
  getuser,
  getuserfromusername,
  edituserstatus,
  deleteuser
} from '@/api/user'
import { options } from './options'
import { ElMessage } from 'element-plus'
import Dialog from './components/dialogadmin.vue'
import Edit from './components/edit.vue'
const tableData = ref([])

const queryForm = ref({
  name: '',
  pageIndex: 1,
  pageSize: 10,
  role: 3
})
const temp = ref({
  name: '',
  pageIndex: 1,
  pageSize: 100000,
  role: 3
})

const total = ref(10)
const dialogVisible = ref(false) //   添加用户是否弹出
const editVisible = ref(false) //   编辑是否弹出
const rowvalue = ref({}) //  编辑信息的原信息
//  更新table
const inigetuser = async () => {
  temp.value.name = queryForm.value.name
  const tres = await getuser(temp.value)
  total.value = tres.data.data.list.length
  const res = await getuser(queryForm.value)
  tableData.value = res.data.data.list
  console.log(tableData.value)
  for (let i in tableData.value) {
    tableData.value[i].createTime = tableData.value[i].createTime.substring(
      0,
      10
    )
    if (tableData.value[i].status === 1) {
      tableData.value[i].statusbool = true
    }
    if (tableData.value[i].status === 0) {
      tableData.value[i].statusbool = false
    }
  }
}
inigetuser()

const handleSizeChange = (pageSize) => {
  queryForm.value.pageIndex = 1
  queryForm.value.pageSize = pageSize
  inigetuser()
}

const handleCurrentChange = (pagenum) => {
  queryForm.value.pageIndex = pagenum
  inigetuser()
}
//  通过名字检索
const regetuser = async () => {
  const res = await getuserfromusername(queryForm.value.name)
  tableData.value = res.data.data
  for (let i = 0; i < tableData.value.length; i++) {
    console.log(tableData.value)
    if (tableData.value[i].role === 3) {
      tableData.value[i].createTime = tableData.value[i].createTime.substring(
        0,
        10
      )
      if (tableData.value[i].status === 1) {
        tableData.value[i].statusbool = true
      }
      if (tableData.value[i].status === 0) {
        tableData.value[i].statusbool = false
      }
    } else {
      tableData.value.splice(i, 1)
      i = i - 1
    }
  }
  total.value = tableData.value.length
}
//  添加用户
const handleadduser = () => {
  dialogVisible.value = true
}
// 编辑用户
const edituser = (row) => {
  rowvalue.value = JSON.parse(JSON.stringify(row))
  editVisible.value = true
}
//  修改用户状态
const changestatus = (info) => {
  edituserstatus(info.id)
  ElMessage({
    showClose: true,
    message: '管理员状态修改成功',
    type: 'success'
  })
}
// 删除用户
const clickdeleteuser = (info) => {
  if (info.id === 1) {
    ElMessage({
      showClose: true,
      message: '超级管理员无法删除',
      type: 'warning'
    })
  } else {
    deleteuser(info.id)
    ElMessage({
      showClose: true,
      message: '成功删除管理员',
      type: 'success'
    })
  }
  inigetuser()
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
</style>
